<template>
  <section class='f-login' :style="{'height': currentHeight + 'px'}">
    <div class="f-center" style="margin-top:90px">
      <img style="width:79px;height:79px;" src="@/assets/icons/mfb_logo.png" alt="">
    </div>
    <div class="f-center f-mt-20">
      <p style="font-size: 20px;color: #000000;">欢迎使用秒返平台</p>
    </div>
    <van-form class="f-form" @submit="onSubmit">
      <van-cell-group inset style="background-color: transparent;">
        <van-field v-model="form.account" type="tel" clearable name="account" placeholder="请输入11位手机号" maxlength="11"
          :rules="[{ required: true, message: '请填写11位手机号' }]">
          <template #left-icon>
            <img style="width:14px;height:17px;margin-top:3px" class="f-mr-10" src="@/assets/icons/login_icon_phone.png" alt="">
          </template>
        </van-field>
        <van-field class="f-cell" v-model="form.password" :type="form.showPassword?'':'password'" clearable name="password"
          placeholder="请输入密码" style="border-bottom:1px solid red" :rules="[{ required: true, message: '请填写密码' }]">
          <template #left-icon>
            <van-icon v-show="!form.showPassword" name="closed-eye" style="width:14px" class="f-mr-10"
              @click="form.showPassword = true" />
            <van-icon v-show="form.showPassword" name="eye-o" style="width:14px" class="f-mr-10"
              @click="form.showPassword = false" />
          </template>
        </van-field>
        <van-field v-show="false" />
      </van-cell-group>
      <section class="f-flex-between" style="font-size: 12px;color: #424242;padding: 10px 32px">
        <van-checkbox v-model="keepPWD" shape="square" icon-size="15px" checked-color="#488BFE">记住密码</van-checkbox>
        <p @click="toForget">忘记密码？</p>
      </section>
      <div class="f-submit-btn">
        <van-button round block type="primary" color="#488BFE" native-type="submit">
          登录
        </van-button>
      </div>
      <div class="f-to-register">新用户？<span style="color:#488BFE" @click="toRegister">去注册</span></div>
    </van-form>

    <img class="f-img" src="@/assets/imgs/login_bg.png" alt="">

    <section class="f-bottom">
      <van-checkbox v-model="checked" checked-color="#488BFE" icon-size="15px">我已阅读并同意《用户使用协议》</van-checkbox>
    </section>
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from "vuex";
import JsBridge from '@/utils/JsBridge.js'
import { showToast, showLoadingToast, closeToast, contactListProps } from 'vant';
import { removeStore, setStore, getStore, warningDeal } from '@/utils/utils';
import api from './api'
import hexMD5 from '@/utils/md5.min.js'
export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      form: {
        account: '',
        password: '',
      },

      keepPWD: false,
      checked: false,
      currentHeight: '',

      isApp: computed(() => {
        return store.state.isApp
      }),
    })

    onMounted(() => {
      removeStore('USER_INFO_MF')
      let userAccont = getStore('USER_ACCONT_MF')
      if (userAccont) {
        state.keepPWD = true
        state.form.account = userAccont.account
        state.form.password = userAccont.password
      }

      // 设置app基座连接地址
      let json = {
        domain: getUrl()
      }
      JsBridge.callHandler("setDomain", json, (res) => {
        console.log('setDomain 响应值 ： ', res);
      })

      state.currentHeight = window.innerHeight
    })

    /**
     * url最后带 '/'
     */
    const getUrl = () => {
      let url = ``
      if (WEB_SOURCE.mode == "master") {
        url = `https://miaofanbao.yilianyun.top/`
      } else {
        url = `http://192.168.10.31:5001/`
      }
      return url
    }

    const onSubmit = (values) => {
      let json = {
        "account": values.account,
        "password": values.password
      }

      if (!state.checked) {
        warningDeal('请同意用户使用协议')
        return
      }

      showLoadingToast({
        message: '登录中...',
        forbidClick: true,
        duration: 3000,
      })

      if (state.keepPWD) {
        setStore("USER_ACCONT_MF", json);
      } else {
        removeStore("USER_ACCONT_MF")
      }
      if (state.isApp) {
        JsBridge.callHandler('login', json, (response) => {
          let res = JSON.parse(response)
          if (res.code == 200) {
            closeToast()
            setStore('USER_INFO_MF', res.data)
            router.replace('/home')
          } else if (res.code == 699) {
            toRealName(values.account)
            showToast(res.msg ? res.msg : res.error)
          } else {
            showToast(res.msg ? res.msg : res.error)
          }
        })
      } else {
        json.password = hexMD5(json.password)
        api.loginH5(json).then(res => {
          if (res.code == '200') {
            setStore('USER_INFO_MF', res.data)
            closeToast()
            router.replace('/home')
          } else {
            showToast(res.msg ? res.msg : res.error)
          }
        }).catch(err => {
          if (err?.code == '699') {
            toRealName(values.account)
            showToast(err.msg ? err.msg : err.error)
          }
          console.log(err)
        })
      }
    };

    const toForget = () => {
      router.push({
        path: '/forget'
      })
    }

    const toRegister = () => {
      router.push({
        path: '/register'
      })
    }

    const toRealName = async (shopUserPhone) => {
      const re = await router.push({
        path: '/realName',
        query: {
          shopUserPhone
        }
      })
    }

    return {
      ...toRefs(state),
      onSubmit,
      toForget,
      toRegister,
    }
  }
}
</script>
<style lang='scss' scoped>
.f-login {
  position: relative;
  overflow: hidden;
  .f-form {
    margin-top: 50px;
  }
  .f-submit-btn {
    margin-top: 40px;
    padding: 0 60px;
  }
  .f-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .f-bottom {
    position: absolute;
    bottom: 20px;
    left: 0px;
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 13px;
    color: #424242;
    .van-checkbox__icon--round .van-icon {
      border-color: #424242;
    }
    .van-checkbox__icon--checked .van-icon {
      border-color: var(--van-checkbox-checked-icon-color);
    }
  }
  .f-to-register {
    text-align: center;
    font-size: 12px;
    margin-top: 20px;
  }

  .van-cell {
    background-color: transparent;
  }
}
</style>